<!-- 登录页 -->

<template>
    <div class="login">
        <h1>{{ loginLogo }}</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="login-form">
            <el-form-item prop="loginName">
                <el-input placeholder="请输入用户名" v-model="ruleForm.loginName">
                    <span slot="prepend">用户名:</span>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password">
                    <span slot="prepend">密&nbsp;&nbsp;&nbsp;码:</span>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>
            <div class="login-remember">
                <el-checkbox v-model="checked" text-color="#fff">
                    <span>记住密码</span>
                </el-checkbox>
            </div>
        </el-form>

        <ul class="topbar-ls">
            <li>
                <el-dropdown trigger="click">
                    <i class="el-icon-setting"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <router-link to="/update-password">修改密码</router-link>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <router-link to="/login">退出登录</router-link>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </li>
        </ul>
    </div>
</template>

<script>

import mTitle from '@/config/mTitle'
import { login } from '@/service/getData'
import { setStore, getStore, removeStore } from '@/config/mUtils'

export default {
    name: 'login',
    data () {
        return {
            loginLogo: '',
            checked: false,
            ruleForm: {
                loginName: '',
                password: '',
                agree: false
            },
            rules: {
                loginName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        let that = this,
            remember = getStore('remember'),
            loginName = getStore('loginName'),
            password = getStore('password');

        // 自动填充账号密码
        if (remember && loginName && password) {
            that.ruleForm.loginName = loginName;
            that.ruleForm.password = password;
            that.checked = true
        }
        // 设置logo名
        that.loginLogo = mTitle.loginLogo;
    },
    methods: {
        // 点击登录
        submitForm(formName) {
            let that = this;

            that.$refs[formName].validate((valid) => {
                if (valid) {
                    that.getLogin();
                } else {
                    return false;
                }
            });
        },
        // 请求登录
        async getLogin() {
            let      that = this,
                loginName = that.ruleForm.loginName,
                 password = that.ruleForm.password,
                      res = await login(loginName, password);

            if (res.retStatus == responseStatus.ok) { // 登录成功
                // 是否记住密码
                if (that.checked) {
                    setStore('remember', true);
                }else {
                    removeStore('remember');
                }
                // 储存账号密码
                setStore('loginName', loginName);
                setStore('password', password);
                // 弹出成功提示框
                layer.msg('登录成功，正在跳转...', {
                    offset: '100px',
                    time: 1000,
                    icon: 1
                }, function() {
                    that.$router.push('/home/index');
                });
            }else { // 登录失败
                layer.msg(res.retMsg, {
                    offset: '100px',
                    icon: 2
                });
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .login {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: url(../../assets/images/login/login_bg.jpg);
        background-size: cover;
        h1 {
            color: #fff;
            font-size: 26px;
            text-align: center;
        }
    }
    .login-form {
        width: 310px;
        padding: 28px 25px;
        margin-top: 50px;
        background: hsla(0, 0%, 100%, .45);
        border-radius: 10px;
        box-sizing: border-box;
    }
    .login-remember {
        display: flex;
        justify-content: flex-end;
        span {
            color: #fff;
        }
    }
    .el-button--primary {
        width: 100%;
    }
</style>